<script setup>
// 引入 api
import { ref } from "vue"

// 是否渲染
const isOk = ref(true)

// 点击函数
function btn1() {
    isOk.value = true;
}

function btn2() {
    isOk.value = false;
}
</script>

<template>
    <!-- 按钮 -->
    <input type="button" value="显示组件A" @click="btn1">
    <input type="button" value="显示组件B" @click="btn2">

    <!-- 渲染 -->
    <p v-if="isOk">
        这是组件A
    </p>

    <p v-else>
        这是组件B
    </p>
</template>